<template>
     <div id="funTable">
            <!-- 简要信息 -->
            <div class="BrieflyTable">
                <!-- logo -->
                <div class="logo">
                    <canvas class="rayBox" id="canvas" width="75px" height="75px"></canvas>
                </div>
                <div class="logoBorder"></div>
                <!-- 余额 -->
                <div class="wallet">
                    <div></div>
                    <span>余额</span>
                </div>
                <p>58888888.00</p>
            </div>
            <!-- DV厅列表 -->
            <div class="DVtable">
                <!-- DV厅选项 -->
                <dv :rest="dv" :select.sync="Select" :uid="k" v-for="(dv,k) in DVTable" @tab="SelectGame" :key="k"></dv>
            </div>
            <!-- 二维码打开选项 -->
            <img src="../img/Phone.jpg" @click="openEwm">
            
    </div>
</template>
<script>
import dv from "@/components/gameTable/dv.vue"
import vx from "@/components/gameTable/vx.vue"
export default {
    name:"leftList",
    data(){
        return{
            DVTable:[
                { tatel: "DV一厅", table: [
                    { src: "", tatel: "百家乐" },
                    { src: "", tatel: "龙虎" },
                ] },
                { tatel: "DV二厅", table: [
                    { src: "", tatel: "百家乐" },
                    { src: "", tatel: "龙虎" },
                ] }
            ],
             Select: { key: 0, index: 0 },
              sorketVivw: [
            { name: "百家乐1", time: 5, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 2 },
            { name: "百家乐2", time: 0, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: false, room: 1 },
            { name: "百家乐3", time: 40, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, romm: 2 },
            { name: "百家乐4", time: 0, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 'login', room: 1 },
            { name: "百家乐5", time: 22, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, romm: 2 },
            { name: "百家乐6", time: 45, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 1 },
            { name: "百家乐7", time: 50, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 2 },
            { name: "百家乐8", time: 48, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 1 },
            { name: "百家乐8", time: 22, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 2 },
            { name: "百家乐8", time: 56, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 1 },
            { name: "百家乐8", time: 58, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 2 },
            { name: "百家乐8", time: 12, allMoney: 6582458, people: 168, banker: 858522, game: [{ min: 10, max: 500 }, { min: 100, max: 5000 }, { min: 1000, max: 50000 }], current: 1, room: 1 },
        ],
         ewm: false,
         ewmsrc: "../img/ewm.jpg",
         height: 100

        }
   
    },
     methods: {
        SelectGame: function (x) {
            this.Select = x;
        },
        openEwm: function () {
            this.$data.ewm = !this.$data.ewm;
            console.log( this.$data.ewm);
        },
        F11: function () {
            var el = document.documentElement;
            var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
            if (!isFullscreen) { //进入全屏,多重短路表达式
                (el.requestFullscreen && el.requestFullscreen()) ||
                    (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
                    (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
                var height = window.screen.height;
                this.height = height - 70 + 'px';
            }
            else { //退出全屏,三目运算符
                document.exitFullscreen ? document.exitFullscreen() :
                    document.mozCancelFullScreen ? document.mozCancelFullScreen() :
                        document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
                document.msExitFullscreen ? document.msExitFullscreen() : '';
                // var height = document.documentElement.scrollHeight;
            }
        }
     },
     components: {
        dv: dv,
        vx: vx
    },
}
</script>
<style scoped>

*{
    margin: 0;
    padding: 0;
}
/*左边功能栏*/
#funTable{
	width: 118px;
	height: 100%;
	background: #fff;
	margin-right: 15px;
	background: #140f0b;
	position: relative;
	box-shadow: 0px 0px 10px black;
}
#funTable .BrieflyTable{
	width: 118px;
	height: 246px;
	background: url(../img/logoBack.jpg) no-repeat;
	border-bottom: 1px solid #372312;
}
#funTable .BrieflyTable .logo{
	width: 108px;
	height: 92px;
	position: relative;
	top: 11px;
	margin: 0 auto;
	background: url(../img/logo.png) no-repeat center;
	margin-bottom: 20px;
}
#funTable .BrieflyTable .logo .rayBox{
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	left: 18px;
	top: 2px;
	overflow: hidden;
}
/* #funTable .BrieflyTable .logo .rayBox .ray{
	width: 80px;
	height: 80px;
	background: url(../img/ray.png);
	transform: translateX(-75px);
	animation:ray 4.5s infinite;
} */

@keyframes ray{
	0%{
		transform: translateX(-75px)
	}
	100%{
		transform: translateX(75px)
	}
}
#funTable .BrieflyTable  .logoBorder{
	width: 118px;
	height: 2px;
	background: url(../img/index.png) no-repeat -23px -38px;
	margin-bottom: 12px;
}
#funTable .BrieflyTable .wallet{
	color: #e5d8bd;
	display: flex;
	align-items:center;
	padding-left: 9px;
}
#funTable .BrieflyTable .wallet div{
	width: 21px;
	height: 21px;
	margin-right: 5px;
	background: url(../img/index.png) no-repeat -2px -28px;
}
#funTable .BrieflyTable p{
	color: #fff;
	padding-left: 9px;
	padding-top: 4px;
}
#funTable .DVtable{
	width: 118px;
	padding-bottom: 60px;
	background: #5c4e37;
}
#funTable img{
	margin: 30px auto;
    cursor: pointer;
    width: 80%;
    display: block;
}
</style>
